{% extends 'example.html.twig' %}

{% block example %}
    <div id="input" class="mb-3">
        <h2>Input</h2>
        <div class="mb-3">
            <label for="progress" class="form-label">Progress</label>
            <input type="range" class="form-range" id="progress" value="0.5" step="0.01" min="0" max="1"/>
        </div>
        <button id="doRender" class="btn btn-primary">Render</button>
    </div>
    <output data-testid="output" class="mb-3"></output>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="module">
        import { trans } from 'app';

        const inputProgress = document.querySelector('#progress');

        function render() {
            document.querySelector('[data-testid="output"]').innerHTML = `
                <h2>Output</h2>
                <ul >
                    <li>🇬🇧 ${trans('progress', { progress: inputProgress.value }, 'messages', 'en')}</li>
                    <li>🇫🇷 ${trans('progress', { progress: inputProgress.value }, 'messages', 'fr')}</li>
                </ul>
            `
        }

        document.querySelector('#doRender').addEventListener('click', render);
    </script>
{% endblock %}
